<template>
  <div id="app">
		<keep-alive>
			<router-view/>
		</keep-alive>
    <el-dialog :title="notice.title" :visible.sync="dialogNoticeVisible" width="50%" center class="notice-dialog">
      <div v-html="notice.content" class="text-sm notice-content"></div>
      <div class="margin-top-sm">{{ notice.remark }}</div>
      <span slot="footer" class="dialog-footer">
				<el-button round @click="confirmNotice" size="small">确 认</el-button>
			</span>
    </el-dialog>
  </div>
</template>

<script>
// import {
// 	get_cur_notice,
// 	confirm as notice_door_confirm
// } from '@/api/door/door_notice.js'
import {
  confirm as notice_confirm_confirm
} from '@/api/system/notice.js'
import {
  getToken,
  getDoorToken
} from '@/utils/auth'

export default {
  name: 'App',
  provide() { //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
    return {
      reload: this.reload,
      getCurNotice: this.getCurNotice,
      showNotice: this.showNotice
    }
  },
  created() {
    // 在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('page_params')) {
      // replaceState，替换store的根状态
      this.saveObjToState(JSON.parse(sessionStorage.getItem('page_params')))
    }
    const that = this
    // 在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      const uuid = that.$route.query.uuid
      const obj = that.mapToObj(that.$store.state.keep.pageParamsMap)
      let tmp = {}
      tmp[uuid] = obj[uuid]
      sessionStorage.setItem('page_params', JSON.stringify(tmp))
    })
  },
  data() {
    return {
      notice: {
        id: null,
        title: null,
        remark: null,
        content: '',
        confirmed: false
      },
      noticeContent: '',
      dialogNoticeVisible: false
    }
  },
  methods: {
    mapToObj(strMap) {
      let obj = Object.create(null)
      for (let [k, v] of strMap) {
        obj[k] = v
      }
      return obj
    },
    saveObjToState(obj) {
      for (let key in obj) {
        this.$store.state.keep.pageParamsMap.set(key, obj[key])
      }
    },
    reload() {
      this.$store.dispatch('app/toggleRouterAlive', false)
      this.$nextTick(function() {
        this.$store.dispatch('app/toggleRouterAlive', true)
      })
    },
    getCurNotice() {
      const that = this
      // get_cur_notice()
      // .then(res => {
      // 	const { code, data } = res
      // 	if(data){
      // 		that.notice = {
      // 			id: data.id,
      // 			title: data.title,
      // 			remark: data.remark,
      // 			content: data.content,
      // 			confirmed: data.confirmed
      // 		}
      // 	}
      // })
    },
    showNotice(visible = false) {
      const that = this
      // if(that.notice.id && !that.notice.confirmed){
      // 	that.dialogNoticeVisible = visible
      // }
    },
    confirmNotice() {
      const that = this
      if (getToken()) {
        notice_confirm_confirm({ id: that.notice.id })
      } else {
        notice_door_confirm({ id: that.notice.id })
      }
      that.dialogNoticeVisible = false
      that.notice = {
        id: null,
        title: null,
        remark: null,
        content: '',
        confirmed: false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.notice-dialog {
  /deep/ .el-dialog__body {
    padding-top: 10px !important;
  }

  /deep/ .notice-content p {
    margin: 5px 0;
  }
}
</style>
